<template>

  <container-item-wrapper v-show="!widget.options.hidden" :widget="widget">
    <vxe-table
      ref="dataTable"
      keep-source
      :loading="loadingFlag"
      :data="tableData"
      :row-config="{isHover: true,isCurrent:true}"
      :border="widget.options.border"
      :edit-config="editConfig"
      :column-config="{resizable: true}"
      :height="widget.options.tableHeight"
      :keyboard-config="keyboardConfig"
      :mouse-config="{selected: true}"
      show-overflow="tooltip"
      @current-row-change="handleCurrentChange"
      @cell-click="handleCellClick"
      @checkbox-change="handleSelectionChange"
      @checkbox-all="handleSelectionAll"
    >
      <vxe-column v-if="widget.options.showCheckBox" type="checkbox" width="60"></vxe-column>
      <vxe-column v-for="(column,colIndex) in widget.options.tableColumns"
                  :field="column.prop"
                  :title="column.label"
                  :width="column.width"
                  :visible="column.show"
                  :edit-render="editRender"
                  :formatter="formatterValue(column)"
      >
        <template #default="{row,rowIndex}">
          <template v-if="column.widgetList.length>0"
                    v-for="(subWidget,swIdx) in column.widgetList">
            <span v-if="subWidget.options.optionItems?.length>0">
                  {{ getLabel(subWidget, row[column.prop]) }}
            </span>
            <span v-else>
              {{ row[column.prop] }}
            </span>
          </template>
          <div v-else>
            <span>{{ row[column.prop] }}</span>
          </div>
        </template>
        <template #edit="{row,rowIndex}">
          <template v-if="column.widgetList.length>0" v-for="(subWidget,swIdx) in column.widgetList">
            <component :is="subWidget.type + '-widget'" :field="subWidget"
                       :parent-list="column.widgetList"
                       style="display:flex;align-items: center"
                       :in-table-flag="true"
                       :index-of-parent-list="swIdx" :parent-widget="column"
                       :columnProp="column"
                       :sub-form-row-index="rowIndex" :sub-form-col-index="colIndex">
            </component>
          </template>
          <template v-else>
            <span>{{ row[column.prop] }}</span>
          </template>
        </template>
      </vxe-column>
      <template v-if="!!widget.options.showButtonsColumn">
        <vxe-column
          class-name="data-table-buttons-column"
          show-overflow
          :fixed="buttonsColumnFixed"
          :align="'center'"
          :title="widget.options.buttonsColumnTitle"
          :width="widget.options.buttonsColumnWidth"
        >
          <template #default="scope">
            <template v-if="isEditStatus(scope.row)">
              <el-button @click="saveFormData(scope.row,TABLE_EDIT_TYPE.ROW)" link type="primary">保存</el-button>
              <el-button @click="cancelRowEvent(scope.row)" link type="danger">取消</el-button>
            </template>
            <template v-else>
              <el-button
                v-for="(ob) in widget.options.operationButtons"
                v-show="showOperationButton(ob, scope.$index, scope.row)"
                :type="getOperationButtonType(ob)" :link="isLinkOperationButton(ob)"
                :size="ob.size" :round="ob.round"
                :disabled="disableOperationButton(ob, scope.$index, scope.row)"
                @click="handleOperationButtonClick(ob.name, scope.$index, scope.row)"
                :class="['data-table-' + ob.name + '-button']">
                {{ getOperationButtonLabel(ob, scope.$index, scope.row) }}
              </el-button>
            </template>
          </template>
        </vxe-column>
      </template>
    </vxe-table>
    <el-pagination v-if="widget.options.showPagination"
                   :class="paginationAlign"
                   :small="widget.options.smallPagination"
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   :layout="paginationLayout"
                   :total="total"
                   :teleported="false"
                   @size-change="handlePageSizeChange"
                   @current-change="handleCurrentPageChange">
    </el-pagination>
    <data-table-item-dialog v-if="visible"
                            v-model="visible"
                            :row="editRow"
                            :table-widget="widget"
                            :table-widget-ref="this"
                            @setColumnWidgetListValue="setColumnWidgetListValue"
                            @saveFormData="saveFormData"
    />
  </container-item-wrapper>
</template>
<script>
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
import emitter from '@/utils/emitter'
import i18n from '@/utils/i18n'
import {
  formatDate1,
  formatDate2,
  formatDate3,
  formatDate4,
  formatDate5,
  formatNumber1,
  formatNumber2,
  formatNumber3,
  formatNumber4,
  formatNumber5,
  formatNumber6,
  formatNumber7,
} from '@/utils/format'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixin from '@/components/form-render/refMixin'
import containerItemMixin from '@/components/form-render/container-item/containerItemMixin'
import TableColumnCustomRender from '@/components/form-render/table-column-custom-render'
import {
  getDSByName,
  getObjectValue, isSelectcy,
  overwriteObj,
  runDataSourceRequest, translateOptionItems,
  traverseWidgetsOfDataTable,
} from '@/utils/util'
import TableHighLevelColumn from '@/components/form-render/table-high-level-column'
import serviceMixin from '@/components/form-render/serviceMixin'
import { TABLE_EDIT_TYPE } from '@/utils/constants'
import XEUtils from 'xe-utils'
import DataTableItemDialog from '@/components/form-render/container-item/data-table-item-dialog.vue'
import { ElMessage } from 'element-plus'
import { VxeTable } from 'vxe-table'
import { isArray } from 'lodash-es'

export default {
  name: 'DataTableItem',
  componentName: 'ContainerItem',  //必须固定为ContainerItem，用于接收父级组件的broadcast事件
  mixins: [emitter, i18n, refMixin, containerItemMixin, serviceMixin],
  components: {
    VxeTable,
    DataTableItemDialog,
    TableHighLevelColumn,
    ContainerItemWrapper,
    TableColumnCustomRender,
    ...FieldComponents,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: '',
    },

  },
  inject: ['refList', 'sfRefList', 'globalModel', 'getFormConfig', 'getGlobalDsv'],
  provide() {
    return {
      getSubFormName: () => this.widget.options.name,
      getDataTableWidget: () => this.$refs.dataTable,
      /*parentTableEvent: {
        clearEdit: () => {
          this.$refs.dataTable.clearEdit()
        },
        getEditRecord: () => {
          return this.$refs.dataTable.getEditRecord()
        },
        setSelectCell: (row, column) => {
          this.$refs.dataTable.setSelectCell(row, column)
        },
      },*/
    }
  },
  data() {
    return {
      selectAllFlag: false,

      selectedIndices: [],
      selectedRows: [],
      pageSize: this.widget.options.pagination.pageSize,
      pageSizes: this.widget.options.pagination.pageSizes,
      currentPage: this.widget.options.pagination.currentPage,
      total: this.widget.options.pagination.total,

      //是否跳过selectionChange事件
      skipSelectionChangeEvent: false,

      //显示编辑弹窗
      visible: false,
      //编辑行数据
      editRow: undefined,
      tableData: [],
      editRender: { autoFocus: true },
      editConfig: { trigger: 'dblclick', mode: 'cell', showStatus: true },
      keyboardConfig: { /*isEdit: true,*/ isArrow: true, isTab: true, isEsc: true },
      TABLE_EDIT_TYPE,
      row: null,
      column: null,
    }
  },
  computed: {
    formConfig() {
      return this.getFormConfig()
    },

    paginationLayout() {
      return !!this.widget.options.smallPagination ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

    widgetSize() {
      return this.widget.options.tableSize || 'default'
    },

    singleRowSelectFlag() {
      return !this.widget.options.showCheckBox
    },

    buttonsColumnFixed() {
      if (this.widget.options.buttonsColumnFixed === undefined) {
        return 'right'
      }

      return !this.widget.options.buttonsColumnFixed ? false : this.widget.options.buttonsColumnFixed
    },

    tableHeight() {
      return this.widget.options.tableHeight || undefined
    },

    selectionWidth() {
      return !this.widget.options.showSummary ? (!this.widget.options.treeDataEnabled ? 42 : 70) : 53
    },

    getDataTableRef() {
      return this
    },

    tableRowKey() {
      return !this.widget.options.rowKey ? null : this.widget.options.rowKey
    },

    paginationAlign() {
      let alignType = !this.widget.options.paginationAlign ? 'left' : this.widget.options.paginationAlign
      return 'align-' + alignType
    },

  },
  created() {
    this.initRefList()
    this.handleOnCreated()
  },
  mounted() {
    if (!!this.widget.options.service.enabled && this.widget.options.autoLoad) {
      this.loadData()

    }
    this.$nextTick(() => {
      this.handleOnMounted()
    })
  },
  beforeDestroy() {
    this.unregisterFromRefList()
  },
  methods: {
    initFieldData() {
      this.formModel[this.widget.options.name] = this.tableData ?? []
      console.log('initFieldData', this.getTableColumns())
      this.loadSubWidgetData()
    },
    loadSubWidgetData() {
      this.$nextTick(() => {
        this.getTableColumns().forEach(column => {
          column.widgetList.forEach(async widget => {
            // console.log(111, widget)
            if (widget.options?.service?.id) {
              const res = await this.loadDataFromService(widget.options.service.id)
              // console.log(222, translateOptionItems(res, widget.type, widget.options.labelKey, widget.options.valueKey))
              widget.options.optionItems = translateOptionItems(res, widget.type, widget.options.labelKey, widget.options.valueKey)
            }
          })
        })
      })
    },
    formatter(row, column, cellValue) {
      return cellValue
    },

    formatterValue(column) {

      return ({ row, columnField, cellValue }) => {
        if (!cellValue) {
          return ''
        }

        if (!!column.formatS && !!column.show) {
          console.log('formatter', column)
          switch (column.formatS) {
            case 'd1':
              return formatDate1(cellValue)
            case 'd2':
              return formatDate2(cellValue)
            case 'd3':
              return formatDate3(cellValue)
            case 'd4':
              return formatDate4(cellValue)
            case 'd5':
              return formatDate5(cellValue)
            case 'n1':
              return formatNumber1(cellValue)
            case 'n2':
              return formatNumber2(cellValue)
            case 'n3':
              return formatNumber3(cellValue)
            case 'n4':
              return formatNumber4(cellValue)
            case 'n5':
              return formatNumber5(cellValue)
            case 'n6':
              return formatNumber6(cellValue)
            case 'n7':
              return formatNumber7(cellValue)
          }
        }
        return cellValue
      }
    },

    getColumnRender(row, column) {
      /* TODO: 每个table-cell，render函数会执行2次，原因不明！！！ */
      return new Function('h', 'params', 'components', column.render)
    },

    /* 注意：在加载树形结构数据时，此方法只能获取第一级选中节点，选择子节点时返回-1，应在文档中加以说明！！！ */
    getRowIndex(row) {
      return this.tableData.lastIndexOf(row)
    },

    findColumnAndSetHidden(columnName, hiddenFlag) {
      this.widget.options.tableColumns.forEach(tc => {
        if (tc.prop === columnName) {
          tc.show = !hiddenFlag
        }
      })
    },

    handleOnCreated() {
      if (!!this.widget.options.onCreated) {
        let customFunc = new Function(this.widget.options.onCreated)
        customFunc.call(this)
      }
    },

    handleOnMounted() {
      if (!!this.widget.options.onMounted) {
        let customFunc = new Function(this.widget.options.onMounted)
        customFunc.call(this)
      }
    },

    /**
     * 单选时触发该事件
     * @param row
     * @param rowIndex
     * @param column
     * @param columnIndex
     */
    handleCurrentChange({ row, rowIndex, column, columnIndex }) {
      /*if (!!this.skipSelectionChangeEvent) {
        return
      }

      if (!!this.widget.options.showCheckBox) {
        return
      }

      this.selectedIndices.length = 0
      this.selectedRows.length = 0
      let rowIndex = this.getRowIndex(currentRow)
      this.selectedIndices.push(rowIndex)
      this.selectedRows.push(currentRow)*/

      if (!!this.widget.options.onCurrentChange) {
        let customFn = new Function('row', 'rowIndex', 'column', 'columnIndex', this.widget.options.onCurrentChange)
        customFn.call(this, row, rowIndex, column, columnIndex)
      } else {
        /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
        // this.dispatch('VFormRender', 'dataTableSelectionChange', [this, [currentRow], this.selectedIndices])
      }
    },

    /**
     * 多选时触发该事件
     * @param selection
     */
    handleSelectionChange(selection) {
      const { checked, records, rowIndex } = selection
      if (checked) {
        this.selectedIndices.push(rowIndex)
      } else {
        this.selectedIndices.splice(this.selectedIndices.indexOf(rowIndex), 1)
      }
      if (!!this.widget.options.onSelectionChange) {
        let customFn = new Function('checked', 'selection', 'selectIndices', this.widget.options.onSelectionChange)
        customFn.call(this, checked, records, this.selectedIndices)
      } else {
        //!* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ *!/
        // this.dispatch('VFormRender', 'dataTableSelectionChange', [this, selection, this.selectedIndices])
      }
    },
    handleSelectionAll({ checked, records }) {
      if (!!this.widget.options.onCheckAllChange) {
        let customFn = new Function('checked', 'selection', this.widget.options.onCheckAllChange)
        customFn.call(this, checked, records)
      }
    },
    handleSortChange({ column, prop, order }) {
      if (!!this.widget.options.onSortChange) {
        let customFn = new Function('column', 'prop', 'order', 'pageSize', 'currentPage', this.widget.options.onSortChange)
        customFn.call(this, column, prop, order, this.pageSize, this.currentPage)
      } else {
        /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
        this.dispatch('VFormRender', 'dataTableSortChange',
          [this, column, prop, order, this.pageSize, this.currentPage])
      }
    },

    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize
      if (!!this.widget.options.dsEnabled && !!this.widget.options.dsName) {
        this.loadDataFromDS()
      }
      if (!!this.widget.options.service.enabled && !!this.widget.options.service.key) {
        this.loadData()
      }
      if (!!this.widget.options.onPageSizeChange) {
        let customFn = new Function('pageSize', 'currentPage', this.widget.options.onPageSizeChange)
        customFn.call(this, pageSize, this.currentPage)
      } else {
        this.dispatch('VFormRender', 'dataTablePageSizeChange', [this, pageSize, this.currentPage])
      }
    },

    handleCurrentPageChange(currentPage) {
      console.log('handleCurrentPageChange')
      this.currentPage = currentPage
      if (!!this.widget.options.dsEnabled && !!this.widget.options.dsName) {
        this.loadDataFromDS()
      }
      if (!!this.widget.options.service.enabled && !!this.widget.options.service.key) {
        this.loadData()
      }

      if (!!this.widget.options.onCurrentPageChange) {
        let customFn = new Function('pageSize', 'currentPage', this.widget.options.onCurrentPageChange)
        customFn.call(this, this.pageSize, currentPage)
      } else {
        this.dispatch('VFormRender', 'dataTablePageChange', [this, this.pageSize, currentPage])
      }
    },
    handleOperationButtonClick(btnName, rowIndex, row) {
      this.skipSelectionChangeEvent = true
      const handle = () => {
        if (!!this.widget.options.onOperationButtonClick) {
          let customFn = new Function('buttonName', 'rowIndex', 'row', this.widget.options.onOperationButtonClick)
          customFn.call(this, btnName, rowIndex, row)
        } else {
          this.dispatch('VFormRender', 'operationButtonClick', [this, btnName, rowIndex, row])
        }
      }
      try {
        if (btnName === 'edit') {
          if (this.widget.options.rowEditType === TABLE_EDIT_TYPE.ROW) {
            this.editRowEvent(row, rowIndex).then(() => {
              handle()
            })
          } else if (this.widget.options.rowEditType === TABLE_EDIT_TYPE.DIALOG) {
            this.editRow = row
            this.visible = true
            this.$nextTick(() => {
              handle()
            })
          }
        } else {
          handle()
        }

      } finally {
        this.skipSelectionChangeEvent = false
      }
    },

    showOperationButton(buttonConfig, rowIndex, row) {
      if (!!this.widget.options.onHideOperationButton) {
        let customFn = new Function('buttonConfig', 'rowIndex', 'row', this.widget.options.onHideOperationButton)
        return !customFn.call(this, buttonConfig, rowIndex, row)
      } else {
        return !buttonConfig.hidden
      }
    },

    disableOperationButton(buttonConfig, rowIndex, row) {
      if (!!this.widget.options.onDisableOperationButton) {
        let customFn = new Function('buttonConfig', 'rowIndex', 'row', this.widget.options.onDisableOperationButton)
        return customFn.call(this, buttonConfig, rowIndex, row)
      } else {
        return buttonConfig.disabled
      }
    },

    getOperationButtonLabel(buttonConfig, rowIndex, row) {
      if (!!this.widget.options.onGetOperationButtonLabel) {
        let customFn = new Function('buttonConfig', 'rowIndex', 'row', this.widget.options.onGetOperationButtonLabel)
        //return customFn.call(this, buttonConfig, rowIndex, row) || buttonConfig.label
        return customFn.call(this, buttonConfig, rowIndex, row)
      } else {
        return buttonConfig.label
      }
    },

    getRowClassName({ row, rowIndex }) {
      if (!!this.widget.options.onGetRowClassName) {
        let customFn = new Function('rowIndex', 'row', this.widget.options.onGetRowClassName)
        return customFn.call(this, rowIndex, row)
      } else {
        return ''
      }
    },

    getSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!!this.widget.options.onGetSpanMethod) {
        let customFn = new Function('row', 'column', 'rowIndex', 'columnIndex', this.widget.options.onGetSpanMethod)
        return customFn.call(this, row, column, rowIndex, columnIndex)
      }
    },

    handleHeaderClick(column, event) {
      if (!!this.widget.options.onHeaderClick) {
        let customFn = new Function('column', 'event', this.widget.options.onHeaderClick)
        return customFn.call(this, column, event)
      }
    },

    handleRowClick({ row, rowIndex, column, columnIndex }) {
      if (!!this.widget.options.onRowClick) {
        let customFn = new Function('row', 'rowIndex', 'column', 'columnIndex', this.widget.options.onRowClick)
        return customFn.call(this, row, rowIndex, column, columnIndex)
      }
    },

    handleRowDoubleClick({ row, rowIndex, column, columnIndex }) {
      if (!!this.widget.options.onRowDoubleClick) {
        let customFn = new Function('row', 'rowIndex', 'column', 'columnIndex', this.widget.options.onRowDoubleClick)
        return customFn.call(this, row, rowIndex, column, columnIndex)
      }
    },


    getOperationButtonType(operationButton) {
      if (operationButton.type !== 'text') {
        return operationButton.type
      } else {
        return 'primary'
      }
    },

    isLinkOperationButton(operationButton) {
      return operationButton.type === 'text'
    },

    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
    /* 提示：用户可自行扩充这些方法！！！ */

    getTableColumns() {
      return this.widget.options.tableColumns
    },

    /**
     * 设置表格列
     * @param tableColumns
     */
    setTableColumns(tableColumns) {
      this.widget.options.tableColumns = tableColumns
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout()  //防止行列显示错位！！
      })
    },

    /**
     * 设置表格列（为了兼容文档错误，setTableColumn应为setTableColumns）
     * @param tableColumns
     */
    setTableColumn(tableColumns) {
      this.setTableColumns(tableColumns)
    },

    /**
     * 从数据源加载表格列
     * @param localDsv 本地数据源变量DSV
     * @param dsName 数据源名称
     */
    loadColumnsFromDS(localDsv = {}, dsName) {
      let curDS = getDSByName(this.formConfig, dsName)
      if (!!curDS) {
        let gDsv = this.getGlobalDsv() || {}
        let newDsv = new Object({})
        overwriteObj(newDsv, gDsv)
        overwriteObj(newDsv, localDsv)
        newDsv.widgetName = this.widget.options.name
        this.loadingFlag = true
        runDataSourceRequest(curDS, newDsv, this.getFormRef(), false, this.$message).then(res => {
          this.setTableColumns(res)
          this.loadingFlag = false
        }).catch(err => {
          this.$message.error(err.message)
          this.loadingFlag = false
        })
      }
    },

    /**
     * 动态设置表格列的隐藏或显示
     * @param columnNames
     * @param hiddenFlag
     */
    setTableColumnsHidden(columnNames, hiddenFlag) {
      if (!!columnNames) {
        if (typeof columnNames === 'string') {
          this.findColumnAndSetHidden(columnNames, hiddenFlag)
        } else if (Array.isArray(columnNames)) {
          columnNames.forEach(cn => {
            this.findColumnAndSetHidden(cn, hiddenFlag)
          })
        }

        this.$nextTick(() => {
          this.$refs.dataTable.doLayout()  //防止行列显示错位！！
        })
      }
    },

    /**
     * 获取表格数据
     */
    getTableData() {
      return this.tableData
    },

    /**
     * 设置表格数据
     * @param tableData
     */
    setTableData(tableData) {
      this.loadingFlag = true
      this.tableData = tableData
      this.loadingFlag = false
    },

    /**
     * 从数据源加载表格数据
     * @param localDsv 本地数据源变量DSV
     * @param dsName 数据源名称，不传此值，则使用dsName属性绑定的数据源
     */
    loadDataFromDS(localDsv = {}, dsName = '') {
      let curDSName = dsName || this.widget.options.dsName
      let curDSetName = this.widget.options.dataSetName
      let curDS = getDSByName(this.formConfig, curDSName)
      if (!!curDS) {
        let gDsv = this.getGlobalDsv() || {}
        let newDsv = new Object({})
        overwriteObj(newDsv, gDsv)
        overwriteObj(newDsv, localDsv)
        newDsv.widgetName = this.widget.options.name
        newDsv.pageSize = this.pageSize
        newDsv.currentPage = this.currentPage
        this.loadingFlag = true
        runDataSourceRequest(curDS, newDsv, this.getFormRef(), false, this.$message).then(res => {
          if (!!curDSetName && res.hasOwnProperty(curDSetName)) {
            this.setTableData(res[curDSetName])
          } else {
            this.setTableData(res)
          }
          this.loadingFlag = false
        }).catch(err => {
          this.$message.error(err.message)
          this.loadingFlag = false
        })
      }
    },


    /**
     * 设置表格分页
     * @param pagination
     */
    setPagination(pagination) {
      if (pagination.currentPage !== undefined) {
        this.currentPage = pagination.currentPage
        this.widget.options.pagination.currentPage = pagination.currentPage
      }

      if (pagination.pageSize !== undefined) {
        this.pageSize = pagination.pageSize
        this.widget.options.pagination.pageSize = pagination.pageSize
      }

      if (pagination.pageSizes !== undefined) {
        this.pageSizes = pagination.pageSizes
        this.widget.options.pagination.pageSizes = pagination.pageSizes
      }

      if (pagination.total !== undefined) {
        this.total = pagination.total
        this.widget.options.pagination.total = pagination.total
      }
    },

    getPagination() {
      return {
        currentPage: this.widget.options.pagination.currentPage,
        pageSize: this.widget.options.pagination.pageSize,
        total: this.widget.options.pagination.total,
      }
    },

    /**
     * 获取选中行数据，格式为对象数组
     * @returns {[]}
     */
    getSelectedRow() {
      //return this.$refs.dataTable.selection
      return this.selectedRows
    },

    /**
     * 获取选中行索引，格式为数组
     * @returns {[]}
     */
    getSelectedIndex() {
      return this.selectedIndices
    },

    getNativeTable() {
      return this.$refs.dataTable
    },
    isEditStatus(row) {
      return this.$refs.dataTable?.isEditByRow(row)
    },
    editRowEvent(row, rowIndex, handle) {
      const $table = this.$refs.dataTable
      if ($table.getEditRecord()) {
        ElMessage.warning('请先保存当前编辑的行')
        return
      }
      if ($table) {
        //此处vxetable设置固定列有bug，会多次渲染组件，所以给表单赋值，组件初始化时会同步表单数据
        traverseWidgetsOfDataTable(this.widget.options.tableColumns, (widget, col) => {
          this.formModel[widget.id] = row[col.prop]
        })
        return $table.setEditRow(row)
      }
    },
    saveFormData(row, editType) {
      const tableWidgetIds = []
      traverseWidgetsOfDataTable(this.widget.options.tableColumns, (widget) => {
        tableWidgetIds.push(widget.id)
      })
      // console.log(tableWidgetIds);
      this.getFormRef().validateFields(tableWidgetIds, (valid, fields) => {
        if (valid) {
          traverseWidgetsOfDataTable(this.widget.options.tableColumns, (widget, col) => {
            XEUtils.set(row, col.prop, this.getWidgetRef(widget.id).getValue())
          })
          if (editType === TABLE_EDIT_TYPE.DIALOG) {
            this.visible = false
          } else if (editType === TABLE_EDIT_TYPE.ROW) {
            if (this.$refs.dataTable.getEditRecord()) {
              this.$refs.dataTable?.clearEdit()
            }
          }
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    cancelRowEvent(row) {
      this.setColumnWidgetListValue(row)
      this.$refs.dataTable?.clearEdit().then(() => {
        this.$refs.dataTable?.revertData(row)
      })
    },
    setColumnWidgetListValue(row) {
      traverseWidgetsOfDataTable(this.widget.options.tableColumns, (widget, col) => {
        this.getWidgetRef(widget.id).setValue(XEUtils.get(row, col.prop), true)
      })
    },
    getObjectValue(obj, prop) {
      return getObjectValue(obj, prop)
    },
    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
    onOpened() {
      return new Promise((resolve) => {
        this.setColumnWidgetListValue(this.editRow)
        resolve()
      })
    },
    //如果是下拉等组件，根据值进行转换
    getLabel(subWidget, value) {
      // console.log('getLabel', subWidget, value)
      if (isSelectcy(subWidget.type)) {
        const optionItems = subWidget.options.optionItems
        if (subWidget.options.multiple) {
          if (isArray(value)) {
            return value?.map((item) => optionItems.find((optionItem) => optionItem.value == item)?.label).join(',')
          } else {
            return optionItems?.find((item) => item.value === value)?.label
          }
        } else {
          return optionItems?.find((item) => item.value === value)?.label
        }
      }
    },
    handleCellClick({ row, column }) {
      /*console.log(222, this.$refs.dataTable, row, column)
      this.row = row
      this.column = column*/
      // this.$refs.dataTable.setSelectCell(row, column)
    },
  },
}
</script>

<style lang="scss" scoped>
.collapse-container {
  margin: 2px;

  .form-widget-list {
    min-height: 28px;
  }
}

:deep(.ep-collapsed__header) {
  padding: 10px 12px;
}

:deep(.ep-pagination.align-left) {
  justify-content: left;
}

:deep(.ep-pagination.align-center) {
  justify-content: center;
}

:deep(.ep-pagination.align-right) {
  justify-content: right;
}

</style>
